import React from 'react'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import './ZxStore.css'
import '../../component/font/iconfont.css'
import ZxNotice from '../../component/ZxModal/ZxNotice'
import {NavLink} from 'react-router-dom'
import ZxLike from '../../component/ZxClassic/ZxLike'
import ZxMenuSet from '../MyStore/ZxMenuSet'
import axios from 'axios'
import * as api from '../../utils/Zxapi'
import ZxSelect from '../../component/ZxModal/ZxSelect'
import ZxActive from '../../component/ZxModal/ZxActive'

let style={
    // backgrundColor:'rgb(77,216,101)',
    // backgrundColor:'red',
    backgroundColor: 'rgb(77,216,101)',
    border: '1px solid rgb(77,216,101)',
    color:'white',
}
const tabs = [
    { title: <Badge>店铺经典</Badge> },
    // { title: <Badge text={'今日(20)'}>今日特价</Badge> },
    { title: <Badge>今日特价</Badge> },
    { title: <Badge dot>网红爆款</Badge> },
  ];
  const TabExample = () => (
    <div>
      <Tabs tabs={tabs}
        initialPage={0}
        // onChange={(tab, index) => { console.log('onChange', index, tab); }}
        // onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
      >
        <div className='tabContent' >
             <ZxLike></ZxLike>
           {/* 猜你喜欢内容 */}
        </div>
        <div className='tabContent'>
            <ZxLike></ZxLike>
        </div>
        <div className='tabContent'>
            <ZxLike></ZxLike>
        </div>
      </Tabs>
    </div>
  );
class ZxStore extends React.Component{
    constructor() {
        super();
        this.state = {
          modal2: false,
          name:{},
          titleName:[
              {titleId:1,tiName:'设置公告',btnName:'设置公告'},
              {titleId:2,tiName:'起步价',btnName:'起步价'},
              {titleId:3,tiName:'配送距离',btnName:'配送距离'},
              {titleId:4,tiName:'外卖电话',btnName:'外卖电话'},
              {titleId:5,tiName:'店铺地址',btnName:'店铺地址'}
          ],
          /* 判断上一级  点击修改==修改菜品  添加===添加菜品  点击 */
          MenuData:[
              {MenuId:1,MenuTitle:'修改菜品'},
              {MenuId:2,MenuTitle:'添加菜品'},
          ],
          businessData:{storeState:1,storeStateWords:'休息中!'},
          isBusiness:true,
          /* 装后端返还的所有店铺的数据 */
          shopStoreData:{},
          /* 店铺类型的下拉框===初始状态 */
          display:true,
          /* 装后端获取的店铺类型的数据*/
          shopTypeData:{},
          /* 满减活动的===初始状态 */
          isActive:true
        };
      }
      /* 挂载后===组件第一次渲染完成==在这里发起ajax请求 ==不需要引入,直接在api后面接接口*/
      componentDidMount(){
        this.getShopStoreData()
      }
      /* 获取店铺页面的所有数据 */
      getShopStoreData=()=>{
        axios({
            url:api.GET_STOREDATA,
            method:'get',
            params:{
              shop_phone:'1',
            }
        }).then(data=>{
            if(data.data.code==200){
              this.setState({
                  shopStoreData:data.data.data
              })
            }  
            // console.log(data.data.data);     
        }).catch(err=>{

        })
      }
      /* 点击这个切换营业状态 */
      onchangeState(){
          let newState=this.state.isBusiness
          this.setState({
            isBusiness:!newState
          })
      }
      /* 对话框的关闭回调函数 */
      onClose = key => () => {
            this.getShopStoreData() 
            this.setState({
                [key]: false,
              });
        
      
      }
    // 点击打开对话框
    changeModal(num){
        /* filter返回的是个数组 */
       const myM= this.state.titleName.filter((i, index) => {
            if(i.titleId==num){
               return  i
           } 
        })
        // this.setState(prevState=>({
        //     display:!prevState.display
        //   }))
         this.setState({
             name:myM[0],
             modal2:true
         })
    }
    /* 点击会员中心===跳转到会员中心页面 */
    changeVipCenter(){
        this.props.history.push('/Home/ZxVipCenter')
    }
     /* 点击店铺评价===跳转到店铺评价页面 */
    storeComments(){
        this.props.history.push('/Home/ZxComments')
    }
    /* 点击店铺类型==弹出店铺类型选择框===拿到后端的数据==再将数据传去下拉框的组件 */
    ChangeStoreType(){
      this.setState(prevState=>({
        display:!prevState.display
      }))
      axios({
          url:api.GET_STOPTYPE,
          method:'get'
      }).then(data=>{
          if(data.data.code==200){
             this.setState({
                shopTypeData:data.data.data
             })
          }
      }).catch(err=>{
      })
    }
    /*点击满减活动===弹出满减活动的弹框 */
    changeActive(){
        this.setState(prevState=>({
            isActive:!prevState.isActive
          }))
    }
    /*移除生命周期函数===在退出弹框的时候==不执行这个函数 */
    componentWillUnmount(){
        this.ChangeStoreType=''
    }
    /* 预写的================================================ */
    /* 添加   修改菜品 */
    // addMenu(){
    //     const myAdd=this.state.MenuData[1]
    //     this.props.history.push({
    //         pathname:'/Home/ZxMenuSet',
    //         state:{myAdd}
    //     }) 
    // }
    /* 修改菜品 */
    // changeMenu(){
    //     const myAdd=this.state.MenuData[0]
    //     this.props.history.push({
    //         pathname:'/Home/ZxMenuSet',
    //         state:{myAdd}
    //     }) 
    //    }
    /* 店铺类型==点击==提交==蒙板===回到店铺首页 */   
    backStore(){
        this.setState({
            display:true,
            isActive:true
        })    
    }  
    render(){
        // console.log(this.state.display)
        let {name,modal2,shopStoreData,shopTypeData}=this.state
        return(
            <div className='bigBox'>
                {/* 头部显示营业状态  和  切换ON和OFF的按钮 */}
                <div className='storeHeaderBoxSet'>
                    <span  className='iconfont icon-yingyeting'></span>
                    <span>本店{this.state.businessData.storeStateWords}</span>
                    <button onClick={this.onchangeState.bind(this)} 
                     style={this.state.isBusiness ? {}:style}
                     className='openBtn'
                     >{this.state.isBusiness ? 'ON':'OFF'}
                    </button>
                </div>
                {/* <h3>我是店铺页面</h3> */}
                <div className='storeBox'>
                    <div className='storeName'>
                        <div className='storeItem' onClick={this.changeActive.bind(this,1)}>
                            <span  className='iconfont icon-yingyeting'></span>
                            <p>满减活动</p>
                        </div>
                        {/* 点击出现弹框 */}
                        <div className='storeItem'onClick={this.changeModal.bind(this,1)}>
                            <span  className='iconfont icon-gonggao1'></span>
                            <p>设置公告</p>                     
                        </div>
                        {/* 点击跳转页面==店铺评价 */}
                        {/* <NavLink to='/ZxComment'> */}
                            <div className='storeItem' onClick={this.storeComments.bind(this)}>
                                <span  className='iconfont icon-comment-w'></span>
                                <p>店铺评价</p>     
                            </div>
                        {/* </NavLink>                      */}
                    </div> 
                    <div className='storeName'>
                         {/* 点击出现弹框 */}
                        <div className='storeItem' onClick={this.changeModal.bind(this,2)}>
                            <span  className='iconfont icon-paobu'></span>
                            <p> 起步价</p>                      
                        </div>
                        <div className='storeItem' onClick={this.changeModal.bind(this,3)}>
                             {/* 点击出现弹框 */}
                            <span  className='iconfont icon-juliicon-'></span>
                            <p> 配送距离</p>                       
                        </div>
                         {/* 点击出现弹框 */}
                        <div className='storeItem' onClick={this.changeModal.bind(this,4)}>
                            <span  className='iconfont icon-dianhua'></span>
                            <p> 外卖电话</p>      
                        </div>
                    </div>
                    <div className='storeName'> 
                     {/* 点击出现弹框===下拉框 */}
                        <div className='storeItem' onClick={this.ChangeStoreType.bind(this)}>
                            <span className='iconfont icon-dianpu-copy'></span>
                            <p> 店铺类型</p>      
                        </div>
                        <div className='storeItem' onClick={this.changeModal.bind(this,5)}>
                            <span  className='iconfont icon-dizhi'></span>
                            <p> 店铺地址</p>      
                        </div>
                       {/* 点击跳转页面==会员中心 */}
                        <div className='storeItem' onClick={this.changeVipCenter.bind(this)}>
                            <span className='iconfont icon-huiyuan2'></span>
                            <p> 会员中心</p>      
                        </div>
                    </div>
                </div>
                <ZxNotice data={name} 
                storeData={shopStoreData} 
                modal2={modal2} 
                onClose={this.onClose}
                getShopStoreData={this.getShopStoreData}>
                </ZxNotice> 
                {/* 测试操作 */}
                {/* <button onClick={this.addMenu.bind(this)} >添加菜品</button>
                <button onClick={this.changeMenu.bind(this)}>修改菜品</button> */}

                {/* 这里是店铺类型的弹出框 */}
                <div className={this.state.display ? 'colseSelectStyle' :'openSelectStyle'}>
                    <div className={this.state.display ? 'colMaskStyle' :'opMaskStyle'} onClick={this.backStore.bind(this)}>
                    </div>
                    <ZxSelect data={shopTypeData}/>
                </div>
                <div className={this.state.isActive ? 'colseSelectStyle' :'openSelectStyle'}>
                    <div className={this.state.isActive ? 'colMaskStyle' :'opMaskStyle'} onClick={this.backStore.bind(this)}>
                    </div>
                    <ZxActive/>
                </div>
                <TabExample />                        
            </div>
        )
    }
}
export default ZxStore
